<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            height: 100vh;
            width: 100vw;
        }

        #canvas {
            width: 500px;
            height: 500px;
            margin: 20px auto;
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <div class="canvas">
        <canvas id="canvas" width="500" height="500"></canvas>
    </div>
    <script>
        var canvas = document.querySelector("#canvas")
        var ctx = canvas.getContext("2d")


        function pan() {
            ctx.save()
            ctx.clearRect(0, 0, 500, 500)
            ctx.beginPath();
            ctx.translate(250, 250);
            ctx.arc(0, 0, 245, 0, 2 * Math.PI);
            ctx.lineWidth = 10;
            ctx.stroke();
            ctx.closePath();
            scale(ctx)
            line(ctx)
            ctx.restore()
            requestAnimationFrame(pan)
        }
        pan()
        //刻画 分
        function scale(ctx) {
            for (var i = 0; i < 60; i++) {
                ctx.beginPath()
                ctx.moveTo(0, -230)
                ctx.lineTo(0, -245)
                ctx.rotate(2 * Math.PI / 60)
                ctx.lineWidth = 3;
                ctx.stroke()
                ctx.closePath()
            }
            //刻画 时
            for (var i = 0; i < 12; i++) {
                ctx.beginPath()
                ctx.moveTo(0, -220)
                ctx.lineTo(0, -245)
                ctx.font = "20px 黑体"
                ctx.fillText(i == 0 ? 12 : i, -8, -200)
                ctx.rotate(2 * Math.PI / 12)
                ctx.lineWidth = 5;
                ctx.stroke()
                ctx.closePath()
            }
        }
        function line(ctx) {
            // 时 分秒
            var d = new Date()
            var h = d.getHours()
            var m = d.getMinutes()
            var s = d.getSeconds()
            console.log(h, m, s);
            // 中心
            ctx.save()
            ctx.beginPath()
            ctx.arc(0, 0, 10, 0, Math.PI * 2)
            ctx.stroke()
            ctx.closePath()
            ctx.restore()
            // 秒针
            ctx.save()
            ctx.beginPath()
            ctx.rotate(2 * Math.PI / 60 * s)
            ctx.moveTo(0, 0)
            ctx.lineTo(0, -180)
            ctx.lineWidth = 2
            ctx.stroke()
            ctx.closePath()
            ctx.restore()
            //分针
            ctx.save()
            ctx.beginPath()
            ctx.rotate(2 * Math.PI / 60 * m)
            ctx.moveTo(0, 0)
            ctx.lineTo(0, -130)
            ctx.lineWidth = 5;
            ctx.stroke()
            ctx.closePath()
            ctx.restore()
            //时针
            ctx.save()
            ctx.beginPath()
            ctx.rotate(2 * Math.PI / 12 * h)
            ctx.moveTo(0, 0)
            ctx.lineTo(0, -100)
            ctx.lineWidth = 8;
            ctx.stroke()
            ctx.closePath()
            ctx.restore()
        }


    </script>
</body>

</html>